<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">
<head th:include="vue-element::header"></head>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>欢迎页</title>
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/v-charts/lib/style.min.css">
    <style>
        [v-cloak] {
            display: none;
        }

        .box {
            margin-bottom: 25px;
            margin-top: 0px;
            background-color: #fff;
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
        }

        .box-header {
            border-top: 4px solid #e7eaec;
            border-bottom: 1px solid #e7eaec;
            padding: 0px 20px;
        }

        h3 {
            margin-bottom: 20px;
        }

        .box-content {
            padding: 20px 20px;
        }
    </style>
</head>
<body>
<div class="panel panel-default" id="vm" v-cloak>
    <div class="panel-heading">欢迎使用APP管理平台</div>
</div>
</div>
<div th:include="vue-element::footer"></div>
<script src="/js/jquery.min.js?v=2.1.4"></script>
<script src="//cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/v-charts/lib/index.min.js"></script>
<script>
    $(function () {
        // 订单日统计
        var vm = new Vue({
            el: "#vm",
            data: {
                pickerOptions: {
                    disabledDate(time) {
                        return time.getTime() > Date.now();
                    }
                },
                yearMonth: '',
                yearMonth1: '',
                date: '',
                toolbox: {
                    feature: {
                        magicType: {type: ['line', 'bar']},
                        saveAsImage: {}
                    }
                },
                chartSettings: {
                    metrics: ['QTY'],
                    labelMap: {
                        QTY: '订单量'
                    }
                },
                chartSettings1: {
                    metrics: ['count'],
                    labelMap: {
                        count: '日活'
                    }
                },
                chartData: null,
                chartData1: null,
                tableData: {
                    createOrder: 0,
                    standingOrder: 0,
                    assigndOrder: 0,
                    receivedOrder: 0,
                    abnormalOrder: 0,
                    forwardOrder: 0,
                    finishOrder: 0
                }
            },
            computed: {
                dataEmpty() {
                    return this.chartData && this.chartData.rows && this.chartData.rows.length > 0 ? false : true;
                },
                dataEmpty1() {
                    return this.chartData1 && this.chartData1.rows && this.chartData1.rows.length > 0 ? false : true;
                }
            },
            created() {
                this.yearMonth = moment().format('YYYY-MM');
                this.yearMonth1 = moment().format('YYYY-MM');
                this.renderChart(this.yearMonth);
                this.renderChart1(this.yearMonth1);
            },
            mounted() {
                // 订单月统计饼图
                this.myChart = echarts.init(document.getElementById("container"));
                this.myChart.setOption({
                    tooltip: {
                        trigger: 'item',
                        formatter: "{a} <br/>{b} : {c} ({d}%)"
                    },
                    legend: {
                        orient: 'vertical',
                        right: 'right',
                        data: []
                    },
                    series: [
                        {
                            name: '订单月统计',
                            type: 'pie',
                            radius: '55%',
                            center: ['50%', '60%'],
                            data: [],
                            itemStyle: {
                                emphasis: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                });
                window.addEventListener("resize", this.myChart.resize);
                this.date = moment().format('YYYY-MM');
                this.load(this.date);
            },
            methods: {
                renderChart(val) {
                    let that = this;
                    // axios请求数据
                    axios.get("/hxh/order/monthlyOrderStatistics", {
                        params: {
                            yearMonth: val
                        }
                    }).then(function (resp) {
                        const data = resp.data;
                        that.chartData = data;
                    }).catch(function (error) {
                        console.log(error);
                    });
                },
                renderChart1(val) {
                    let that = this;
                    // axios请求数据
                    axios.get("/hxh/userLoginStatistic/monthStatistic", {
                        params: {
                            month: val
                        }
                    }).then(function (resp) {
                        const data = resp.data;
                        that.chartData1 = data;
                    }).catch(function (error) {
                        console.log(error);
                    });
                },
                load: function (date) {
                    let that = this;
                    $.ajax({
                        cache: true,
                        type: "POST",
                        url: '/hxh/order/orderStatisticByMonth',
                        data: {"date": date},
                        dataType: 'json',
                        async: false,
                        error: function (request) {
                            parent.layer.alert("网络超时");
                        },
                        success: function (data) {
                            var nums = [];
                            var names = [];
                            that.tableData = data;

                            $.each(data, function (key, values) { //此处我返回的是list<String,map<String,String>>循环map
                                if (values != 0) {
                                    if (key == 'createOrder') {
                                        key = "新建订单"
                                    } else if (key == 'standingOrder') {
                                        key = "待派单"
                                    } else if (key == 'assigndOrder') {
                                        key = "待接单"
                                    } else if (key == 'receivedOrder') {
                                        key = "服务中订单"
                                    } else if (key == 'abnormalOrder') {
                                        key = "异常订单"
                                    } else if (key == 'forwardOrder') {
                                        key = "待支付订单"
                                    } else if (key == 'finishOrder') {
                                        key = "已完成订单"
                                    }
                                    names.push(key);
                                    var obj = new Object();
                                    obj.name = key;
                                    obj.value = values;
                                    nums.push(obj);
                                }
                            });
                            that.myChart.setOption({ //加载数据图表
                                legend: {
                                    data: names
                                },
                                series: {
                                    // 根据名字对应到相应的系列
                                    data: nums
                                }
                            });
                        }
                    });
                }
            }
        });
    });
</script>
</body>
</html>